@extends('layout.adminindex')
@section('title', '后台导航管理添加')


@section('topmain')
        <div class="top">
            <div class="topleft">
            <a href="{{url('/admin')}}" target="_parent"><img src="{{ URL::asset('adminlizzj/images/logo.png') }}" title="系统首页" /></a>
            </div>  
            <ul class="nav">
            <li><a href="{{url('/admin')}}"><img src="{{ URL::asset('adminlizzj/images/icon01.png') }}" title="工作台首页" /><h2>后台首页</h2></a></li>
            <li><a href="{{url('/admin/cate')}}" class="selected"><img src="{{ URL::asset('adminlizzj/images/icon02.png') }}" title="导航管理" /><h2>导航管理</h2></a></li>
            <li><a href="{{url('/admin/content')}}" ><img src="{{ URL::asset('adminlizzj/images/icon03.png') }}" title="内容管理" /><h2>内容管理</h2></a></li>
            <li><a href="#" ><img src="{{ URL::asset('adminlizzj/images/icon04.png') }}" title="常用工具" /><h2>常用工具</h2></a></li>
            <li><a href="#" ><img src="{{ URL::asset('adminlizzj/images/icon05.png') }}" title="文件管理" /><h2>文件管理</h2></a></li>
            <li><a href="#" ><img src="{{ URL::asset('adminlizzj/images/icon06.png') }}" title="系统设置" /><h2>系统设置</h2></a></li>
            </ul>   
            <div class="topright">    
            <ul>
            <li><span><img src="{{ URL::asset('adminlizzj/images/help.png') }}" title="帮助"  class="helpimg"/></span><a href="#">帮助</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="" target="_parent">退出</a></li>
            </ul>
            <div class="user">
            <span>admin</span>
            <i>消息</i>
            <b>5</b>
            </div>    
            </div>
        </div>
@endsection

@section('leftmain')
<div class="indexleft">
    <div class="lefttop"><span></span>快捷管理</div>
    
   <dl class="leftmenu">
        
    <dd>
    <div class="title">
    <span><img src="{{ URL::asset('adminlizzj/images/leftico01.png') }}"></span>栏目管理
    </div>
        <ul class="menuson" style="display: block;">
        <li ><cite></cite><a href="{{url('/admin/cate')}}">栏目列表</a><i></i></li>
        <li class="active"><cite></cite><a href="{{url('/admin/cate/add')}}">添加栏目</a><i></i></li>
        </ul>    
    </dd>
        
    

    </dl>
   </div>

        @endsection

        @section('rightmain')


        <div class="place"  style="width:1300px">
        <span>位置：</span>
        <ul class="placeul">
        <li><a href="{{url('/admin')}}">首页</a></li>
        <li><a href="{{url('/admin/cate')}}">栏目管理</a></li>
        <li><a href="{{url('/admin/cate/add')}}">栏目添加</a></li>
        </ul>
        </div>
        
       
        
       <div class="formbody">
        
        <div class="formtitle"><span>栏目基本信息</span></div>
        <form  action="/admin/cate/insert" method="post">
        <ul class="forminfo">
            <div id="errorshow">

                @if (count($errors) > 0)
                    <div class="alert alert-danger">

                        <ul>
                        <li>添加失败:</li>
                            @foreach ($errors->all() as $error)
                                <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        <li><label>上级栏目</label>
                <div class="usercity">
                    <div class="cityleft">
                        <div class="uew-select">
                                <select class="select4" style="width: 140px; " name="catepid" >
                                    <option  name="catepid" value="0">[(无)作为一级栏目]</option>
                                 @foreach($cates as $k=>$v)
                                        <option name="catepid" value="{{$v->id}}">{{$v->catename}}</option>
                                 @endforeach
<!--                                     <option name="catepid" value="1">临时管理员</option>
                                        <option name="catepid" value="2">临时管理员</option> -->
                                </select>
                        </div>
                    </div>
                </div>
        </li>
        <li><label>栏目名称</label><input name="catename" class="dfinputuser" type="text"><i>请填写栏目名称</i></li>
        <li><label>栏目目录</label><input name="catenames" class="dfinputuser" type="text"><i>只能为数字或字母</i></li>
        <li><label>栏目图片</label><input id="imagepath" name="cateimage" class="dfinputuser" type="text"><i>&nbsp;&nbsp;</i><input id="imageup" value="上传图片" type="button"><i>(可以为空)</i></li>
        <li><label>前台显示</label><cite><input name="cateshow" type="radio" checked="checked" value="yes" />显示 &nbsp;&nbsp;&nbsp;&nbsp;<input name="cateshow" type="radio" value="no" />不显示</cite></li>
        <li><label>栏目模型</label>
                <div class="usercity">
                    <div class="cityleft">
                        <div class="uew-select">
                                <select class="select2"  name="catetype">
                                    <option name="catetype" value="栏目模型">栏目模型</option>
                                    <option name="catetype" value="单页模型">--|单页模型</option>
                                    <option name="catetype" value="新闻模型">--|新闻模型</option>
                                    <option name="catetype" value="产品模型">--|产品模型</option>
                                    <option name="catetype" value="留言模型">--|留言模型</option>
                                    <option name="catetype" value="招聘模型">--|招聘模型</option>
                                    <option name="catetype" value="简历模型">--|简历模型</option>
                                    <option name="catetype" value="下载模型">--|下载模型</option>
                                </select>
                        </div>
                    </div>
                </div>
        </li>
             {{csrf_field()}}
        <li><label>&nbsp;</label><input class="btnuser" value="添加" type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="btnuser" value="重置" type="reset"></li>
        </ul>
        
        </form>
        </div>
        
        </div>
    
    
       <div class="tipimage" id="showtest" >
           
                <div class="tiptop"><span>栏目图片</span><div id="imageclose"><a></a></div></div>
                    <div id="imageshow">
                        <div id="imageshowone" >
                        <img id="imghead" src=''>
                    </div> 
                     <div id="imageshowones" >  
                    </div>    
                  <div id="imageshowtwo">
                     <div id="imageone">
                          <li><input id="imagepaths" name="imagepath" class="dfinputuser" type="text"></li>
                     </div>
                     <div id="imagetwo">
                         <a href="javascript:document.imageup.reset();"><img  src="{{ URL::asset('adminlizzj/images/imageone.png') }}"></a>
                     </div>
                     <div id="imagethree">
                        <input type="image"  id="buttonUpload" onclick="UpladFile();"  src="{{ URL::asset('adminlizzj/images/imagetwo.png') }}"  >
                     </div>
                    <div class="fileInput left" id="imageresopen" >
                       <input type="file" name="upfile" id="upfile" class="upfile"  onchange="document.getElementById('imagepaths').value=this.value;document.getElementById('imagepath').value=this.value;previewImage(this)"/>
                       <input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
                    </div>
                    
                </div>
            </div>
        </div>
        
    </div>
<!-- t图片上传部分 -->
 
<script type="text/javascript">
    var xhr;
    function createXMLHttpRequest()
    {
        if(window.ActiveXObject)
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xhr = new XMLHttpRequest();
        }
    }
    function UpladFile()
    {
        var fileObj = document.getElementById("upfile").files[0];
        var FileController = '/upload.php';
        var form = new FormData();
        form.append("myfile", fileObj);
        createXMLHttpRequest();
        xhr.onreadystatechange = handleStateChange;
        xhr.open("post", FileController, true);
        xhr.send(form);
    }
    function handleStateChange()
    {
        if(xhr.readyState == 4)
        {
            if (xhr.status == 200 || xhr.status == 0)
            {
                var result = xhr.responseText;
                var json = eval("(" + result + ")");
                 document.getElementById('imagepath').value=json.file;
                // alert('图片链接:n'+json.file);
            }
        }
    }
</script>




<script type="text/javascript">

         function previewImage(file)
        {
          var MAXWIDTH  = 260; 
          var MAXHEIGHT = 180;
          var div = document.getElementById('imageshowone');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                 
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
             
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }


    </script>
    








    <script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
            var error = document.getElementById('errorshow');
                    error.onclick = function(){
                        document.getElementById('errorshow').style.display = 'none';
                    }
          
            // 点击上传图片显示弹出框
            var imageup = document.getElementById('imageup');
                imageup.onclick = function(){
                         document.getElementById('showtest').style.display = 'block'; 
                    }
                
            // 点击重新打开    
           var imageresopen=document.getElementById('imageresopen');
                       imageresopen.onclick = function(){
                            
                        }       
            // 点击移除
            var imageres=document.getElementById('imagetwo');
                   imageres.onclick = function(){
                         document.getElementById('imagepath').value = null;
                         document.getElementById('imagepaths').value = null;
                         document.getElementById('imghead').src="{{ URL::asset('adminlizzj/images/imagenull.png') }}";

                    }
            // 最上边的错号控制
            var imageclose=document.getElementById('imageclose');
                   imageclose.onclick = function(){
                         document.getElementById('showtest').style.display = 'none'; 
                 }   
           var imagenone=document.getElementById('imagethree');
                   imagenone.onclick = function(){
                         document.getElementById('showtest').style.display = 'none'; 
                 }  


           // 声明全局变量 检测input 是否输入正确
            var CATENAME = false;
            var CATENAMES = false;


            //绑定表单提交事件
            $('form').submit(function(){
                //触发所有的丧失焦点事件
                $('input').trigger('blur');
                if(CATENAME && CATENAMES){
                    return true;
                }
                //阻止默认行为
                return false;
            })

            //栏目名称丧失焦点事件
            $('input[name= catename]').blur(function(){
                //获取邮箱的值
                var catename = $(this).val();
                // 判断邮箱是否为空
                if(catename == ''){
                    // 为空
                    $(this).next().html('栏目名称不能为空').css('color','red');   
                }else{
                    var inp = $(this);
                    // 发送ajax
                    $.ajax({
                        url:'{{"/catetestone"}}',
                        data:{catename:catename},
                        type:'get',
                        //同步
                        async:false,
                        success:function(data){
                            //判断用户名是否可用
                            if(data == 0){
                                //可以用
                                inp.next().html('你可以使用该名称').css('color','green');
                                //修改全局变量
                                CATENAME = true;
                            }else{
                                //用户不可用
                                inp.next().html('该栏目已存在').css('color','red');
                            }
                        },
                        error:function(){
                            alert('ajax错误');
                        }
                    })
                }               
            })

                //栏目目录丧失焦点事件
                    $('input[name= catenames]').blur(function(){
                        //获取邮箱的值
                        var catenames = $(this).val();
                        // 判断邮箱是否为空
                        if(catenames == ''){
                            // 为空
                            $(this).next().html('栏目目录不能为空').css('color','red');   
                        }else{
                            var inp = $(this);
                            // 发送ajax
                            $.ajax({
                                url:'{{"/catetesttwo"}}',
                                data:{catenames:catenames},
                                type:'get',
                                //同步
                                async:false,
                                success:function(data){
                                    //判断用户名是否可用
                                    if(data == 0){
                                        //可以用
                                        inp.next().html('你可以使用该名称').css('color','green');
                                        //修改全局变量
                                        CATENAMES = true;
                                    }else{
                                        //用户不可用
                                        inp.next().html('该栏目已存在').css('color','red');
                                    }
                                },
                                error:function(){
                                    alert('ajax错误');
                                }
                            })
                        }               
                    })



</script>






        @endsection    